<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>product-detail</title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
		<link rel="stylesheet" href="../css/all.css" />
		<link rel="stylesheet" href="../css/left-menu.css" />
		<style>
			input {
				margin-top: 3px;
			}
			
			.mui-product li {
				display: inline-block;
				width: 24%;
			}
			
			.mui-bar-nav {
				box-shadow: none;
			}
			
			.mui-content > .mui-table-view:first-child {
				margin-top: 4px;
			}
		</style>

	</head>

	<body>
		<header class="mui-bar mui-bar-nav own-main-background-color">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left own-left-nav-color"></a>
			<input id="serach" type="text" style="border-radius: 10px;  height: 38px; width:80%;">
			<a id="btnserach">搜索</a>
		</header>
		<div class="mui-content">
			<ul id="product" class="mui-table-view mui-product">
				<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">综合</a>
				</li>
				<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">销量</a>
				</li>
				<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">价格</a>
				</li>
				<li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" id="btn_serach" href="#">刷选</a>
				</li>
			</ul>
			<ul id="product" class="mui-table-view">
				<li class="mui-table-view-cell" id="product_index">
					<div class="mui-row">
						<div class="mui-pull-left">
							<img class="" style=" width:80px; height:80px; " src="../k/yf_1.jpg">
						</div>
						<div class="mui-media-body mui-media-body-left">
							<p class="ellipsis">能和心爱的人一起睡觉，是件幸福的事情；</p>
							<p class="mui-h4 own-red">￥177.00</p>
							<p class="mui-ellipsis">好评98%<span class="mui-pull-right">5607人</span></p>
						</div>
					</div>

				</li>
			</ul>
		</div>
		<div class="mui-menu">
			<ul id="list">
				<li>
					<a href="#">首页2</a>
				</li>
				<li>
					<a href="#">问题2</a>
				</li>
				<li>
					<a href="#">文章2</a>
				</li>
				<li>
					<a href="#">关注2</a>
				</li>
				<li>
					<a href="#">发现2</a>
				</li>
			</ul>
		</div>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script>
			var isHidden = true;
			var list = document.getElementById("list");
			var toggle = document.getElementById("btn_serach")
			var product = document.getElementById("product");
			mui.plusReady(function() {
				var isHidden = true;
				toggle.addEventListener("tap", function() {
					showhide();
				});
				mui(".mui-menu").on("tap", "li", function() {
					hidecaidan();
				})
				document.getElementById("product_index").addEventListener("tap",function()
				{
					  var productinfo=plus.webview.getWebviewById("home_index");
					  mui.fire(productinfo,"loadcontent",{name:'yf'});
					  productinfo.show("fade-in",200)
				})
			})
            
			function showhide() {
				if (isHidden)
					showcaidan();
				else
					hidecaidan();
			}

			function showcaidan() {
				list.style.left = "0px";
				isHidden = false;
			}
			function hidecaidan() {
				list.style.left = "-200px";
				isHidden = true;
			}

		</script>
	</body>

</html>